<layout name="Common/layout"/>

<link rel="stylesheet" href="__PUBLIC__/Home/style/fillin.css" type="text/css">
<script type="text/javascript" src="__PUBLIC__/Home/js/cart2.js"></script>

<!-- 页面头部 start -->
<div class="header w990 bc mt15">
    <div class="logo w990">
        <h2 class="fl"><a href="{:U('Index/index')}"><img src="__PUBLIC__/Home/images/20170401.jpg" ></a></h2>
        <div class="flow fr flow2">
            <ul>
                <li>1.我的购物车</li>
                <li class="cur">2.填写核对订单信息</li>
                <li>3.成功提交订单</li>
            </ul>
        </div>
    </div>
</div>
<!-- 页面头部 end -->

<div style="clear:both;"></div>

<!-- 主体部分 start -->
<div class="fillin w990 bc mt15">
    <div class="fillin_hd">
        <h2>填写并核对订单信息</h2>
    </div>

    <div class="fillin_bd">
        <!-- 收货人信息  start-->
        <div class="address">
            <h3>收货人信息 <a href="javascript:;" id="address_modify">[修改]</a></h3>
            <div class="address_info">
                <p><?php echo $addressData['consignee']; ?>
                    <?php echo $addressData['mobile']; ?></p>
                <p>
                    <?php echo $addressData['province']['region_name']; ?>
                    <?php echo $addressData['city']['region_name']; ?>
                    <?php echo $addressData['district']['region_name']; ?>
                    <?php echo $addressData['address']; ?>
                </p>
            </div>

            <div class="address_select none">
                <ul id="address_list">
                    <li><input type="radio" name="address_id" class="new_address" value=""/>使用新地址</li>
                </ul>
                <form action="__ACTION__" class="none" name="address_form" method="post" id="address_form" >
                    <ul >
                        <li>
                            <label for=""><span>*</span>收 货 人：</label>
                            <input type="text" name="consignee" id="consignee" class="txt" />
                        </li>
                        <li>
                            <label for=""><span>*</span>所在地区：</label>
                            <select name="province" id="province">
                                <option value="">请选择</option>

                            </select>

                            <select name="city" id="city">
                                <option value="">请选择</option>

                            </select>

                            <select name="district" id="district">
                                <option value="">请选择</option>
                            </select>
                        </li>
                        <li>
                            <label for=""><span>*</span>详细地址：</label>
                            <input type="text" name="address" id="address" class="txt address"  />
                        </li>
                        <li>
                            <label for=""><span>*</span>手机号码：</label>
                            <input type="text" name="mobile" id="mobile" class="txt" />
                        </li>
                    </ul>
                    <input type="hidden" id="id" name="id" value="" class="txt"/>
                    <a href="javascript:saveAddress();" class="confirm_btn"><span>保存收货人信息</span></a>
                </form>

            </div>
        </div>
        <!-- 收货人信息  end-->

        <!-- 配送方式 start -->
        <form method="post" id="delivery_form" name="delivery_form">
        <div class="delivery">
            <h3>送货方式 <a href="javascript:;" id="delivery_modify">[修改]</a></h3>
            <div class="delivery_info">
                <p>普通快递送货上门</p>
                <p>送货时间不限</p>
            </div>
            <div class="delivery_select none">
                <table>
                    <thead>
                    <tr>
                        <th class="col1">送货方式</th>
                        <th class="col2">运费</th>
                        <th class="col3">运费标准</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach($shippingData as $k => $v): ?>
                    <tr <?php if($k==0):?>class="cur" <?php endif; ?> >
                        <td>
                            <input type="radio" name="shipping_id" value="<?php echo $v['shipping_id']; ?>" title="<?php echo $v['shipping_name']; ?>"
                            <?php if($k==0):?>checked="checked"<?php endif; ?>/><?php echo $v['shipping_name']; ?>
                            <?php if($v['config_option']): ?>
                            <?php $v['config_option'] = explode('##',$v['config_option']); ?>
                            <select name="config_option[<?php echo $v['shipping_id']; ?>]" >
                                <?php foreach ($v['config_option'] as $k1 => $v1): ?>
                                <option value="<?php echo $v1; ?>"><?php echo $v1; ?></option>
                                <?php endforeach; ?>
                            </select>
                            <?php endif; ?>
                        </td>
                        <td><?php echo $v['insure']; ?></td>
                        <td><?php echo $v['shipping_desc']; ?></td>
                    </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
                <a href="javascript:;" class="confirm_btn"><span>确认送货方式</span></a>
            </div>
        </div>
        </form>
        <!-- 配送方式 end -->

        <!-- 支付方式  start-->
        <!--<div class="pay">
            <h3>支付方式 <a href="javascript:;" id="pay_modify">[修改]</a></h3>
            <div class="pay_info">
                <p>货到付款</p>
            </div>

            <div class="pay_select none">
                <table>
                    <tr class="cur">
                        <td class="col1"><input type="radio" name="pay" />货到付款</td>
                        <td class="col2">送货上门后再收款，支持现金、POS机刷卡、支票支付</td>
                    </tr>
                    <tr>
                        <td class="col1"><input type="radio" name="pay" />在线支付</td>
                        <td class="col2">即时到帐，支持绝大数银行借记卡及部分银行信用卡</td>
                    </tr>
                    <tr>
                        <td class="col1"><input type="radio" name="pay" />上门自提</td>
                        <td class="col2">自提时付款，支持现金、POS刷卡、支票支付</td>
                    </tr>
                    <tr>
                        <td class="col1"><input type="radio" name="pay" />邮局汇款</td>
                        <td class="col2">通过快钱平台收款 汇款后1-3个工作日到账</td>
                    </tr>
                </table>
                <a href="" class="confirm_btn"><span>确认支付方式</span></a>
            </div>
        </div>-->
        <!-- 支付方式  end-->

        <!-- 发票信息 start-->
    <form action="post" id="invoice_form" name="invoice_form">
        <div class="receipt">
            <h3>发票信息 <a href="javascript:;" id="receipt_modify">[修改]</a></h3>
            <div class="receipt_info">
                <p>个人发票</p>
                <p>内容：明细</p>
            </div>

            <div class="receipt_select none">

                    <ul>
                        <li>
                            <label for="">发票抬头：</label>
                            <input type="radio" name="inv_payee" value="personal" checked="checked" class="personal" title="个人发票"/>个人
                            <input type="radio" name="inv_payee" value="company" class="company" class="company" title="单位"/>单位
                            <input type="text" name="company_name" class="txt company_input" disabled="disabled" />
                        </li>
                        <li>
                            <label for="">发票内容：</label>
                            <?php foreach($inv_content as $k => $v): ?>
                            <input type="radio" name="inv_content" value="<?php echo $v;?>" <?php if($k==0): ?> checked="checked" <?php endif; ?>/>
                            <?php echo $v; ?>
                            <?php endforeach; ?>
                        </li>
                    </ul>

                <a href="javascript:;" class="confirm_btn"><span>确认发票信息</span></a>
            </div>
        </div>
    </form>
        <!-- 发票信息 end-->

        <!-- 商品清单 start -->
        <div class="goods">
            <h3>商品清单</h3>
            <table>
                <thead>
                <tr>
                    <th class="col1">商品</th>
                    <th class="col2">规格</th>
                    <th class="col3">价格</th>
                    <th class="col4">数量</th>
                    <th class="col5">小计</th>
                </tr>
                </thead>
                <tbody>
                <?php
                    $tp = 0;
                    foreach($data1 as $k=>$v):  ?>
                <tr>
                    <td class="col1"><a href="<?php echo U('Index/goods?id='.$v['goods_id']); ?>"><?php showImage($v['mid_logo']); ?></a>
                        <strong><a href="<?php echo U('Index/goods?id='.$v['goods_id']); ?>"><?php echo $v['goods_name']; ?></a></strong></td>

                    <td class="col2">
                        <?php foreach($v['gaData'] as $k1 => $v1): ?>
                        <p><?php echo $v1['attr_name']; ?>：<?php echo $v1['attr_value']; ?></p>
                        <?php endforeach; ?>
                    </td>

                    <td class="col3">￥<?php echo $v['price']; ?></td>
                    <td class="col4"> <?php echo $v['goods_number']; $sl+=$v['goods_number']; ?></td>
                    <td class="col5"><span>￥<?php echo $xj=$v['price']*$v['goods_number']; $tp+=$xj?></span></td>
                </tr>
                <?php endforeach; ?>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5">
                        <ul>
                            <li>
                                <span><?php echo $sl; ?>件商品，总商品金额：</span>
                                <span>￥</span><b id="goodsPrice"><?php echo $tp; ?></b>
                            </li>
                            <li>
                                <span>运费：</span>

                                <span>￥</span><b id="insure">15</b>

                            </li>

                        </ul>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <!-- 商品清单 end -->

    </div>

    <div class="fillin_ft">
        <a href="__ACTION__" id="add_order"><span>提交订单</span></a>
        <p>应付总额：<span>￥</span><strong id="totalPrice">{$tp+15}</strong></p>

    </div>
</div>
<!-- 主体部分 end -->
<script type="text/javascript">

    /**获取省、市、地区**/
    $(function () {
        $.ajax({
            url:'<?php echo U("UserAddress/region"); ?>',
            type:'get',
            dataType:'json',
            success:function (data) {
                $.each(data,function (k,v) {
                    $('#province').append("<option value='"+v.region_id+"'>"+v.region_name+"</option>")
                });
            }
        });
        $('#province,#city').change(function () {
            var select = $(this);
            $.ajax({
                url : '<?php echo U("UserAddress/region"); ?>',
                type : 'get',
                data : 'id='+select.val(),
                dataType : 'json',
                success : function (data) {
                    select.nextAll('select').empty().append(new Option('请选择'));
                    $.each(data,function (k,v) {
                        select.next().append(new Option(v.region_name,v.region_id));
                    });
                }
            });
        });
    });

    $("#address_list li").click(function () {
        $("#address_form")[0].reset();
        $("#address_form input[name='id']").val('');
        $('#province').val('');
        $('#city,#district').empty().append(new Option("请选择"));
        $('input[name="address_id"][checked]').attr("checked",false).parent().removeClass('cur');
    });

    $("#delivery tr").click(function () {
        $("#delivery_form")[0].reset();
        $("#delivery_form input[name='shipping_id']").val('');
        //$('#province').val('');
        //$('#city,#district').empty().append(new Option("请选择"));
        $('input[name="shipping_id"][checked]').attr("checked",false).parent().removeClass('cur');
    });



    /**获取收货地址**/
    $(function (){
        $.ajax({
            url:'<?php echo U("UserAddress/lst"); ?>',
            type:'get',
            data: 'type=ajax',
            dataType:'json',
            success:function (data) {
                var is_default = 0;
                $.each(data,function (k,v) {
                    var li_html;
                    li_html = '<li '+(v.is_default==1 ? 'class="cur"' : '')+'>';
                    li_html += '<input type="radio" name="address_id" '+(v.is_default==1 ? 'checked="checked"' : '')+' value="'+v.id+'"/>';
                    li_html += v.consignee+' '+v.province.region_name+' '+v.city.region_name+' '+v.district.region_name+' '+v.address+' '+v.mobile;
                    li_html += '<a href="javascript:setDefaultAddress('+v.id+');">设为默认地址 </a>';
                    li_html += '<a href="javascript:editAddress('+v.id+');">编辑 </a>';
                    li_html += '<a href="javascript:delAddress('+v.id+');">删除</a>';
                    li_html += '</li>';
                    $('#address_list').append(li_html);
                    if(v.is_default == 1){
                        is_default = 1;
                    }
                });
                if(is_default == 0){
                    $('#address_list').find('input').eq(1).attr("checked",true);
                }
                /* js */
                $(".new_address").click(function(){
                    $("form[name=address_form]").show();
                    $(this).parent().addClass("cur").siblings().removeClass("cur");

                }).parent().siblings().find("input").click(function(){
                    $("form[name=address_form]").hide();
                    $(this).parent().addClass("cur").siblings().removeClass("cur");
                });
                /* js */
            }
        });
    });

    /**设置默认地址**/
    function setDefaultAddress(address_id){

        $.ajax({
            url : '<?php echo U("UserAddress/setDefault"); ?>',
            type : 'get',
            data : 'id='+address_id,
            dataType : 'json',
            success : function (data) {
                if(data.status == 1){
                    $("input[name='address_id'][checked]").attr("checked",false).parent().removeClass('cur');
                    $("input[name='address_id'][value='"+address_id+"']").attr("checked",true).parent().addClass('cur');
                }
            }
        });
    }

    /**删除地址**/
    function delAddress(address_id) {
        $.ajax({
            url : '<?php echo U("UserAddress/Delete"); ?>',
            type : 'get',
            data : 'id='+address_id,
            dataType : 'json',
            success : function (data) {
                if(data.status == 1){
                    $("input[name='address_id'][value='"+address_id+"']").parent().remove();
                } else {
                    alert(data.info);
                }
            }
        });
    }

    /**修改收货地址**/
    function editAddress(address_id){
        $('input[name="address_id"][checked]').attr("checked",true);
        $("#address_list li").removeClass('cur');
        $("input[name='address_id'][value='"+address_id+"']").attr("checked",true).parent().addClass('cur');
        $.ajax({
            url : '<?php echo U("UserAddress/edit"); ?>',
            type : 'get',
            data : 'id='+address_id,
            dataType : 'json',
            success : function (data) {
                $('#address_form').attr('style','display:block;');
                $("input[name='id']").val(data.id);
                $("input[name='consignee']").val(data.consignee);
                $("input[name='address']").val(data.address);
                $("input[name='mobile']").val(data.mobile);
                var region = {province:data.province,city:data.city,district:data.district};
                $.each(region,function (region_name,region_id) {
                    if(region_name == 'province'){
                        parent_region_id = 1;
                    } else if(region_name == 'city') {
                        parent_region_id = region.province;
                    } else if(region_name == 'district'){
                        parent_region_id = region.city;
                    }
                    $.ajax({
                        url : '<?php echo U("UserAddress/region"); ?>',
                        type : 'get',
                        data : 'id='+parent_region_id,
                        dataType : 'json',
                        success : function (data) {
                            $.each(data,function (k,v) {
                                $('#'+region_name).append(new Option(v.region_name,v.region_id,(region_id==v.region_id ? true : false),
                                        (region_id==v.region_id ? true : false)));
                            });
                        }
                    });
                });
            }

        });

        $('input[name=address_id]').live('click',function () {
            $(this).parent().addClass("cur").siblings().removeClass("cur");
        });
    }

    /**保存收货地址**/
    function saveAddress(){
        var display = $("#address_form").css('display');
        if(display == 'none'){
            $(address_modify).show();
            $(".address_info").show();
            $(".address_select").hide();
            var address_id = $(".cur input").val();
           /* $.ajax({
                url : "<?php echo U('UserAddress/lst'); ?>",
                type : 'get',
                data : 'id='+address_id,
                dataType : 'json',
                success : function (data) {
                    var html = '<p>"+data.consignee+"</p>';
                    $( '.address_info' ).html( html );
                }
            })*/

        }else{
            var params = $("#address_form").serializeArray();
            var values = {};
            for (var item in params){
                values[params[item].name] = params[item].value;
            }
            if(values['id']==''){
                var type = 'add';
                var ajaxUrl = '<?php echo U("UserAddress/add");?>';
            } else {
                var type = 'edit';
                var ajaxUrl = '<?php echo U("UserAddress/edit");?>';
            }
            $.ajax({
                url : ajaxUrl,
                type : 'post',
                data : values,
                dataType : 'json',
                success : function (data) {
                    if(data.status == 1){
                        if(type == 'add'){
                            values['id'] = data.data.id;
                        }
                        var province = $("#province").find("option:selected").text();
                        var city = $("#city").find("option:selected").text();
                        var district = $("#district").find("option:selected").text();
                        var li_html;
                        li_html = '<li class="cur">';
                        li_html += '<input type="radio" name="address_id" checked="checked" value="'+values['id']+'"/>';
                        li_html += values['consignee']+' '+province+' '+city+' '+district+' '+values['address']+' '+values['mobile'];
                        li_html += '<a href="javascript:setDefaultAddress('+values['id']+');">设为默认地址</a>';
                        li_html += '<a href="javascript:editAddress('+values['id']+');">编辑</a>';
                        li_html += '<a href="javascript:delAddress('+values['id']+');">删除</a>';
                        li_html += '</li>';
                        $("input[name='address_id'][checked]").attr("checked",false).parent().removeClass('cur');
                        if(type == 'add'){
                            $('#address_list').append(li_html);
                        } else {
                            $("input[name='address_id'][value='"+values['id']+"']").parent().html(li_html);
                        }
                        $("#address_form")[0].reset();
                        $('#province').val('');
                        $('#city,#district').empty().append(new Option("请选择"));
                        $("#address_form").attr('style','display:none;');
                    } else {
                        alert(data.info);
                    }
                }
            });
        }
    }

    /**确认收送方式按钮**/
    $('.delivery_select > .confirm_btn').click(function () {
        var shipping = $("input[name='shipping_id']:checked");
        var delivery_info = $(this).parent().parent().children('.delivery_info');
        $(this).parent().hide();
        $(this).parent().parent().children('h3').find('a').show();
        var title1 = shipping.attr('title');
        var title2 = $("select[name='config_option["+shipping.val()+"]']").children('option:selected').text();
        delivery_info.show().children('p').eq(0).text(title1).parent().children('p').eq(1).text(title2);
    });

    /**确认发票信息按钮**/
    $('.receipt_select > .confirm_btn').click(function () {
        $(this).parent().hide();
        $(this).parent().parent().children('h3').find('a').show();
        var inv_payee = $("input[name='inv_payee']:checked");
        var receipt_info = $(this).parent().parent().children('.receipt_info');
        var inv_payee_val = inv_payee.val();
        var inv_payee_title = inv_payee.attr('title');
        var inv_content = $("input[name='inv_content']:checked").val();
        var company_name = $("input[name='company_name']").val();
        if(inv_payee_val == 'company'){
            inv_payee_title += '：'+company_name;
        }
        receipt_info.show().children('p').eq(0).text(inv_payee_title).parent().children('p').eq(1).text('内容：'+inv_content);
    });

    /**订单提交**/
    $('#add_order').click(function () {
        //取得要提交页面的URL
        var action = $(this).attr('href');
        //创建from
        var form = $('<form></form>');
        //设置属性
        form.attr('action',action);
        form.attr('method','post');
        //form的target属性决定form在哪个页面提交
        //_self ->当前页面 _blank->新页面
        form.attr('target','_self');
        //创建input
        var addressInput = $('<input type="hidden" name="address_id"/>');
        addressInput.attr('value',$("input[name='address_id']:checked").val());
        form.append(addressInput);

        var shipping_id = $("input[name='shipping_id']:checked").val();
        var shippingInput = $('<input type="hidden" name="shipping_id"/> ');
        shippingInput.attr('value',shipping_id);
        form.append(shippingInput);

        var configOptionInput = $('<input type="hidden" name="config_option['+shipping_id+']"/>');
        configOptionInput.attr('value',$("select[name='config_option["+shipping_id+"]']:selected").val());
        form.append(configOptionInput);

        var invPayeeInput = $('<input type="hidden" name="inv_payee"/>');
        invPayeeInput.attr('value',$("input[name='inv_payee']:checked").val());
        form.append(invPayeeInput);

        var companyNameInput = $('<input type="hidden" name="company_name"/>');
        companyNameInput.attr('value',$("input[name='company_name']").val());
        form.append(companyNameInput);

        var invContentInput = $('<input type="hidden" name="inv_content"/>');
        invContentInput.attr('value',$("input[name='inv_content']:checked").val());
        form.append(invContentInput);

        //附加到form
//        form.append(my_input);
//        form.append($('#address_form').html());
//        form.append($('#delivery_form').html());
//        form.append($('#invoice_form').html());
        //提交表单
        $(document.body).append(form);
        form.submit();
        return false;
    });

    $("input[name=shipping_id]").click(function(){
        $(this).parent().parent().addClass("cur").siblings().removeClass("cur");
        var insure = $(".cur").children('td').eq(1).text();
        var insure1 = $("#insure").text(insure);
        var goodsPrice = $("#goodsPrice").text();
        $("#totalPrice").text(insure * 1 + goodsPrice * 1);
    });

</script>

